<template>
<div class="app">
    <div class="picturedeal">
      <h3>图片粘贴工具</h3>
      <div>
      <el-button type="small" round @click="cleantext">清空</el-button>
      </div>
      <textarea id="editable" contenteditable="true" rows="15" cols="25"></textarea>
    </div>
    <div class='tinymce'> 
        <div class="main">
    <el-input class="title" v-model="title" placeholder="输入文章标题" maxlength="100" show-word-limit></el-input>

    <div v-if="edittype=='fwb'">
        <editor id='tinymce' v-model='context' :init='init'></editor>
    </div>
    <div v-else-if="edittype=='markdown'">
        <mavon-editor style="min-height: 700px;max-height: 700px; " v-model="context" ref="md" @imgAdd='editorUpdataImgs'  @save="saveDoc" @change="updateDoc"/>
    </div>
  
    <div class="type">
    <p>文章分类:</p>
    <el-select v-model="category" placeholder="类别" style="float:left;width:145px">
            <el-option label="Python" value="Python"></el-option>
            <el-option label="Java" value="Java"></el-option>
            <el-option label="前端" value="前端"></el-option>
            <el-option label="后端" value="后端"></el-option>
            <el-option label="运维" value="运维"></el-option>
            <el-option label="安全" value="安全"></el-option>
            <el-option label="其他" value="其他"></el-option>
            </el-select>
    </div>
    <div class="comment">
    </div>
    </div> 
    <div class="fabu">
        <el-button type="primary" @click="dialogSend = true">
            保存修改
        </el-button>
    </div>
    <div class="caogao">
      <el-dialog
        title="提示"
        :visible.sync="dialogSend"
        width="20%"
        :before-close="handleClose">
        <span>确定修改?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSend = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
        </el-dialog>
    </div>
  </div>
</div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

import '../../../static/jietu'

export default {
    created(){
        var url = apiurl.BaseUrl+ window.location.href.substring(23,)
        var that = this
        that.$axios.get({
            url:url
        }).then(res=>{
            that.blogid = res.data.data.blogid
            that.category = res.data.data.category
            that.context = res.data.data.context
            that.edittype = res.data.data.edit_type
            that.title = res.data.data.title
        })
    },
    data(){
        return{
            blogid : '',   //文章id
            category : '', //文章类型
            context : '', //文章内容
            edittype : '', //编辑方式
            title : '',  //文章标题

            dialogSend : false,  //发布对话框

            //富文本配置
              init: {
        language_url: require('../../../static/tinymce/zh_CN.js'),
        language: 'zh_CN',
        skin_url: require('../../../static/tinymce/skins/ui/oxide-dark/skin.css'),
        height: 700,
        width: 800,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      },

        //markdown配置
      toolbars: {
              bold: true, // 粗体
              italic: true, // 斜体
              header: true, // 标题
              underline: true, // 下划线
              mark: true, // 标记
              superscript: true, // 上角标
              quote: true, // 引用
              ol: true, // 有序列表
              link: true, // 链接
              imagelink: true, // 图片链接
              help: true, // 帮助
              code: true, // code
              subfield: true, // 是否需要分栏
              fullscreen: true, // 全屏编辑
              readmodel: true, // 沉浸式阅读
              /* 1.3.5 */
              undo: true, // 上一步
              trash: true, // 清空
              save: true, // 保存（触发events中的save事件）
              /* 1.4.2 */
              navigation: true // 导航目录
            },
        }
    },
    mounted () {
    tinymce.init({})
    },
    components: {Editor},
    methods:{
        update(){
            var that = this 
            if (that.edittype =='fwb'){
                var postdata = {
                    blogid : that.blogid,
                    title : that.title,
                    context : that.context,
                    category : that.category
                }
                that.$axios.post({
                    url : apiurl.updateblog,
                    data : postdata
                }).then(res=>{
                    if(res.data.code==200){
                    alert("修改成功")
                    window.opener=null;
                    window.close()
                    }else{
                    alert("修改失败")
                    }
                })
            }else if (that.edittype == 'markdown'){
                document.querySelector("body > div.app > div.tinymce > div.main > div:nth-child(2) > div > div.v-note-op > div.v-left-item.transition > button.op-icon.fa.fa-mavon-floppy-o").click()
                
                var postdata = {
                    blogid : that.blogid,
                    title : that.title,
                    context : that.context,
                    category : that.category
                }
                that.$axios.post({
                    url : apiurl.updateblog,
                    data : postdata
                }).then(res=>{
                    if(res.data.code==200){
                        alert("修改成功")
                        window.opener=null;
                        window.close()
                        }else{
                        alert("修改失败")
                        }
                })
            }
        },
        editorUpdataImgs(filename,file){  
    const $vm = this.$refs.md
//上传图片
    var formData = new FormData();
    formData.append('imgFile', file,file.name);
    let config = {
        headers:{'Content-Type':'multipart/form-data'},
        emulateJSON:true
    }; 
    this.$axios.post({
      url : apiurl.markdownUpload,
      data : formData,
      headers: {'Content-Type':'multipart/form-data'}
    }).then(function(res){   
        if (res.data.code==200) {    
        $vm.$img2Url(filename, res.data.url)//更改图片内文章上传地址  
        }
    },function(response){       
        this.$message.error('抱歉!图片上传失败!请来联系管理员');
    });
},cleantext(){
    document.querySelector("#editable").value=""
}
    }
}
</script>

<style scoped>

 .tinymce{
        position: absolute;
        top : 100px;
        height: 1000px;
        width: 900px;
        left: 25%;
        box-shadow: 10px 10px 5px #888;
        border:1px solid #666;
    }
    /* #tinymce{
        position: absolute;
    } */
    .main{
        position: absolute;
        top:50px;
        height: 700px;
        width: 800px;
        left: 5%;
    }
    .title{
        width: 800px;
        padding-bottom: 10px;
    }
    .preface{
        padding-bottom: 10px;
    }
    .fabu{
        position: absolute;
        top:920px;
        left: 45px;
    }
    .caogao{
        position: absolute;
        top:920px;
        left: 210px;
    }
    .comment{
      float: right;
    }
    .picturedeal{
      position: absolute;
      height: 200px;
      width: 20%;
      top: 150px;
    }
</style>